<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="1200" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    //优化：将方法的参数附加到对象的属性中，从而实现代码的重用
    //将构造函数的一系列参数用一个对象来传递，让代码更加具有可读性，并且更加具有可维护性——>代码更加健壮

    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");

    //大圆的圆心的x轴
    var bigX = 50;
    //大圆的圆心的y轴
    var bigY = 60;
    //大圆的半径
    var bigRadius = 50;
    //小圆的半径
    var smallRadius = 5;

    function Chain(opts) {
        this.ctx=opts.ctx;
        this.bigX=opts.bigX;
        this.bigY=opts.bigY;
        this.bigRadius=opts.bigRadius;
        this.smallRadius=opts.smallRadius;
        this.num=opts.num;

        this.init();
    }
    Chain.prototype = {
        constructor: Chain,

        init:function(){
            this.drawBigCircle();
            this.drawSmallCircles();
        },

        drawBigCircle: function () {
            this.ctx.beginPath();
            this.ctx.arc(this.bigX, this.bigY, this.bigRadius, 0, 2 * Math.PI);
            this.ctx.stroke();
        },
        /**
         * 根据小圆所在的弧度绘制单个小圆
         */
        drawSmallCircle: function (radius) {
            this.ctx.beginPath();

            //小圆的圆心所在大圆的弧度
            //var radius=0.3*Math.PI;
            var h = Math.sin(radius) * this.bigRadius;

            var b = Math.cos(radius) * this.bigRadius;

            var x = this.bigX + b;
            var y = this.bigY + h;

            this.ctx.arc(x, y, this.smallRadius, 0, 2 * Math.PI);
            this.ctx.fillStyle = "pink";
            this.ctx.fill();

        },
        /**
         * 根据小圆的个数来绘制n个小圆
         */
        drawSmallCircles: function () {
            //从哪个弧度开始绘制
            var startRadius = 0.1 * Math.PI;
            //相邻小圆之间的弧度的差值
            var singleRadius = 2 * Math.PI / this.num;

            for (var i = 0; i < this.num; i++) {
                //计算出每一个小圆的圆心所在的弧度值
                var singleRadius2 = startRadius + singleRadius * i;
                this.drawSmallCircle(singleRadius2);
            }
        }

    }


    var g=3;
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            var opts={
                ctx:ctx,
                bigX:bigX+120*j,
                bigY:bigY+120*i,
                bigRadius:bigRadius,
                smallRadius:smallRadius,
                num:g++
            };

            var chain=new Chain(opts);
        }

    }





    /**
     * 根据角度计算弧度
     * @param angle
     * @returns {number}
     */
    function toRadius(angle) {
        return angle * Math.PI / 180;
    }
</script>
</html>